<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10"><u-avatar :src="avatar" size="140"></u-avatar></view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20" @click="showLoginPop">{{ nickname }}</view>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="integral" :arrow="false" title="当前版本">v1.0.1</u-cell-item>
				<u-cell-group><u-cell-item icon="heart" @click="goToAboutUs" title="关于我们"></u-cell-item></u-cell-group>
			</u-cell-group>
		</view>

		<!-- 注册登录弹窗-->
		<u-popup v-model="isShowLogin" mode="center" border-radius="14" :closeable="true">
			<view class="popup-content">
				<view>登录解锁内容</view>
				<view class="loginBtn" @tap="asyncLogin">
					<view class="item"><image style="width:48rpx;height: 48rpx;float:right;" mode="widthFix" src="/static/idol/wechatIcon.png" alt="微信授权图标"></image></view>
					<view class="item">微信登录</view>
				</view>
				<view class="tips">提示：登录只收集头像与昵称，绝无过度收集用户信息</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowLogin: true,
			avatar:'',
			nickname: '点击登录',
			isLockLogin:false
		};
	},
	onShow(){
		console.log('onShow')
		this.flashLoginInfo();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.flashLoginInfo()
	},
	methods: {
		flashLoginInfo() {
			// 如果缓存中有token
			// 通过token请求查询用户信息接口
			// 如果发现token过期，请求不成功
			// 得到用户信息，展示到页面
			const token = uni.getStorageSync('token');
			if(token){
				this.isShowLogin = false
				this.$u.api.getUserInfo().then(res => {
					// 显示用户信息
					this.avatar = res.userinfo.avatar;
					this.nickname = res.userinfo.nickname;
					// 缓存token
					uni.setStorageSync('token', res.userinfo.token);

				}).catch(e=>{
					// token过期，弹出登录弹窗
					this.isShowLogin = true;
					this.initUserInfo()
				})
			}else {
				// 如果缓存中没有token
				// 弹出登录弹窗
				this.isShowLogin = true;
				this.initUserInfo()
			}
		},
		// 初始化数据
		initUserInfo(){
			this.avatar = '';
			this.nickname = '点击登录';
		},
		goToAboutUs() {
			this.$u.route({
				type: 'to',
				url: 'pages/uCenter/aboutUs'
			});
		},
		showLoginPop() {
			const token = uni.getStorageSync('token');
			if(!token){
				this.isShowLogin = !this.isShowLogin;
			}
		},
		// 用微信登录api，得到code
		promiseLogin() {
			return new Promise((resolve, reject) => {
				// do something here ...
				uni.login({
					provider: 'weixin',
					success: login => {
						resolve(login.code); // fulfilled
					}
				});
			});
		},
		// 请求后端得到openid
		promiseGetOpenId(code) {
			return new Promise((resolve, reject) => {
				// do something here ...
				this.$u.api.userThird({ code: code }).then(res => {
					let data = JSON.parse(res.msg);
					resolve(data.openid); // fulfilled
				});
			});
		},
		// 用户授权登录
		promiseGetUserProfile() {
			return new Promise((resolve, reject) => {
				// do something here ...
				uni.getUserProfile({
					desc: '用于完善会员资料',
					lang: 'zh_CN',
					success: user => {
						// 得到用户信息
						resolve(user.userInfo);
					},
					fail: err => {
						reject(err.errMsg);
						this.isLockLogin = false

					}
				});
			});
		},
		async asyncLogin() {
			// 防止多次点击
			if(this.isLockLogin===true){
				return ;
			}
			this.isLockLogin = true
			// 允许授权,得到用户头像昵称
			const userInfo = await this.promiseGetUserProfile();
			// 得到用户信息，先展示，在处理后端注册
			this.avatar = userInfo.avatarUrl
			this.nickname = userInfo.nickName
			this.isShowLogin = false
			// 得到openid
			const getOpenIdcode = await this.promiseLogin();
			const openid = await this.promiseGetOpenId(getOpenIdcode);
			//用户头像昵称与openid绑定
			userInfo['openid'] = openid;
			// 发起注册或登录
			const res = await this.$u.api.weixinRegister(userInfo);
			// 缓存token
			uni.setStorageSync('token', res.userinfo.token);
			// 刷新用户信息
			this.isLockLogin = false
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}

.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}
.user-box {
	background-color: #fff;
}

// 注册登录弹窗
.popup-content {
	border-radius: 20rpx;
	padding: 40rpx 20rpx;
	font-family: 'Microsoft YaHei UI';
	width: 520rpx;

	.loginBtn {
		position: relative;
		display: flex;
		width: 100%;
		height: 90rpx;
		margin: 60rpx auto;
		border-radius: 20rpx;
		background-color: #f7931e;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #ffffff;

		.item {
			flex: auto;
			&:nth-child(1) {
				padding-right: 10rpx;
			}
		}

	}
}
</style>
